import React,{ Component } from 'react';

import {
    Route,
    Link
  } from 'react-router-dom'

import Topic from './Topic';

export default class Topics extends Component{
    render (){
        return (
      <div className="Main">
      <div className="main-left">
      <ul className="second-nav">
      <li>
        <Link to={`${this.props.match.path}/rendering`}>
          使用 React 渲染
        </Link>
      </li>
      <li>
        <Link to={`${this.props.match.path}/components`}>
          组件
        </Link>
      </li>
      <li>
        <Link to={`${this.props.match.path}/props-v-state`}>
          属性 v. 状态
        </Link>
      </li>
    </ul>
    </div>
        <div className="main-right">
    <Route path={`${this.props.match.path}/:topicId`} component={Topic}/>
    <Route exact path={this.props.match.path} render={() => (
      <h3>请选择一个主题。</h3>
    )}/>
    </div>
  </div>
        )
    }
}
